<template>
  <div class="container">
    <h1>选择一个合适的图表</h1>
    <template v-for="(item, index) in list">
      <h2 :key="item.name">{{ item.name }}</h2>
      <a-row type="flex" :gutter="[20, 20]" :key="index">
        <a-col :span="5" class="item" v-for="(sub, i) in item.children" :key="i">
          <div class="view" @click="selectChart(sub)">
            <h3>{{ sub.name }}</h3>
            <img :src="sub.url" alt="" />
          </div>
        </a-col>
      </a-row>
    </template>
  </div>
</template>

<script>
export default {
  name: 'SelectChart',
  data () {
    return {
      list: [
        {
          name: '折线图类',
          children: [
            {
              name: '折线图',
              url: 'https://gw.alipayobjects.com/mdn/rms_1ad7d9/afts/img/A*XmGlQpYCuocAAAAAAAAAAABkARQnAQ',
              value: 'line1'
            },
            {
              name: '折线图',
              url: 'https://gw.alipayobjects.com/mdn/rms_1ad7d9/afts/img/A*OcpTRJ15qpIAAAAAAAAAAABkARQnAQ',
              value: 'line2'
            }
          ]
        },
        {
          name: '柱状图类',
          children: [
            {
              name: '柱状图',
              url: 'https://gw.alipayobjects.com/mdn/rms_1ad7d9/afts/img/A*BeiZQZgYaEUAAAAAAAAAAABkARQnAQ',
              value: 'bar1'
            }
          ]
        },
        {
          name: '条形图类',
          children: [
            {
              name: '条形图',
              url: 'https://gw.alipayobjects.com/mdn/rms_1ad7d9/afts/img/A*3vSwQ4mXoKgAAAAAAAAAAABkARQnAQ',
              value: 'bar2'
            }
          ]
        },
        {
          name: '饼图类',
          children: [
            {
              name: '饼图',
              url: 'https://gw.alipayobjects.com/mdn/rms_1ad7d9/afts/img/A*it73S47-ywwAAAAAAAAAAABkARQnAQ',
              value: 'pie1'
            }
          ]
        }
      ]
    }
  },
  methods: {
    /**
     * 选择后，发送emit信息
     */
    selectChart (item) {
      console.log(item)
      this.$bus.emit('selectedChart', item)
    }
  }
}
</script>

<style scoped lang="less">
.container {
  > h1 {
    margin-top: 20px;
    font-size: 24px;
    line-height: 33px;
    margin-bottom: 16px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
  }
  > h2 {
    font-size: 16px;
    margin-top: 24px;
    margin-bottom: 16px;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 400;
  }
  .view {
    background: #fff;
    padding-left: 10px;
    padding-right: 10px;
    height: 167px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
    box-shadow: 0 0 5px 0 #dcdade;
    border-radius: 4px;
    text-align: center;
    &:hover {
      background: #fff;
      box-shadow: 0 1px 6px 0 #2d78ea;
      border-radius: 4px;
      transition: all 0.3s;
    }
    img {
      height: 135px;
      max-width: 100%;
      vertical-align: top;
    }
    h3 {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.85);
      line-height: 20px;
      margin: 0;
      padding: 12px 12px 0;
      text-align: left;
    }
  }
}
</style>
